<template>
  <div>
    <!-- 单查询 -->
    <template v-if="!isMoreQuery">
      <el-form
        ref="queryForm"
        class="single-query"
        :inline="true"
        label-suffix=":"
        @submit.native.prevent>
        <el-form-item
          label=""
          prop="value">
          <div style="display: flex;">
            <div style="width: 140px;">
              <el-select
                v-model="value"
                placeholder="请选择"
                @change="onchange">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </div>
            <div
              v-show="selectItem.type"
              class="marginL18"
              :style="selectItem.style ? selectItem.style : 'width: 140px'">
              <template v-if="selectItem.type=='select'">
                <el-select
                  v-model="keywords"
                  :clearable="selectItem.multiple === undefined ? true : !selectItem.multiple"
                  :collapse-tags="selectItem.multiple === undefined ? false : selectItem.multiple"
                  :multiple="selectItem.multiple"
                  :placeholder="placeholder">
                  <el-option
                    v-for="item in selectItem.options"
                    :key="item.key"
                    :label="selectItem.customKey?item[selectItem.customKey.label]:item.label"
                    :value="selectItem.customKey?item[selectItem.customKey.value]:item.value" />
                </el-select>
              </template>
              <template v-if="selectItem.type=='input'">
                <el-input
                  v-model.trim="keywords"
                  clearable
                  :placeholder="placeholder"
                  @keyup.enter.native="onSearch" />
              </template>
              <template v-if="selectItem.type=='date'">
                <el-date-picker
                  v-model="keywords"
                  clearable
                  align
                  :type="selectItem.dateType|| 'date'"
                  style="width:100%"
                  :value-format="selectItem.valueFormat || 'yyyy-MM-dd'"
                  :placeholder="placeholder"></el-date-picker>
              </template>
            </div>
          </div>
        </el-form-item>
        <div class="btn-group">
          <el-button @click="onSearch">
            查询
          </el-button>
          <el-button @click="onReset">
            重置
          </el-button>
          <el-button
            type="success"
            :disabled="usableRefresh"
            @click="onRefresh()">
            刷新
          </el-button>
        </div>
      </el-form>
    </template>
    <!-- 多查询 -->
    <template v-else>
      <!-- <p class="query-title">
        查询条件：
      </p> -->
      <el-form
        ref="queryForm"
        v-bind="config"
        class="more-query"
        :model="form">
        <el-row
          :gutter="20"
          type="flex"
          class="more-row"
          :style="{height:(panelSwitch?'auto':rowHeight+'px')}">
          <el-col
            v-for="(item,index) in options"
            :key="index"
            ref="Col"
            :span="item.span?item.span: 12">
            <el-form-item
              :label="item.label">
              <formElement
                :item="item"
                :fields="form" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="more-btn-group">
              <div class="left-btn">
                <slot name="formLeftSolt"></slot>
              </div>
              <div class="right-btn">
                <el-button @click="onCancel">
                  取消
                </el-button>
                <el-button @click="onReset">
                  重置
                </el-button>
                <el-button
                  type="primary"
                  @click="onSearch">
                  确认
                </el-button>
                <!-- <el-button
                  type="success"
                  :disabled="usableRefresh"
                  @click="onRefresh()">
                  刷新
                </el-button> -->
                <div>
                  <slot name="formRightSolt"></slot>
                </div>
                <el-button
                  v-if="showRowNum"
                  type="text"
                  @click="panelSwitchFn">
                  <template v-if="panelSwitch">
                    收起<i class="el-icon-arrow-up"></i>
                  </template>
                  <template v-else>
                    展开<i class="el-icon-arrow-down"></i>
                  </template>
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </div>
</template>
<script>
  import { preventShake } from '@/utils/index'
  import formElement from './element'
  export default {
    name: 'QueryForm',
    components: {
      formElement
    },
    props: {
      options: {
        type: Array,
        default: () => ({})
      },
      showRowNum: {
        type: Number,
        default: () => 0
      },
      config: {
        type: Object,
        default: () => ({
          'label-suffix': ':',
          'label-width': 'auto'
        })
      },
      isMoreQuery: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        form: {},
        rowHeight: null,
        panelSwitch: false, // 查询开关
        placeholder: null,
        onRefresh: null,
        keywords: null,
        value: null,
        usableRefresh: false, // 刷新按钮是否可用
        selectItem: {}// 当前选中项
      }
    },
    watch: {
      options() {
        this.value = null
        this.keywords = null
        this.placeholder = null
        this.selectItem = {}
        this.options.forEach(item => {
          this.hasDefaultVal(item)
        })
      }
    },
    mounted() {
      this.onRefresh = preventShake(500, this.onSearch)
      this.options.forEach(item => {
        this.$set(this.form, item.key, item.defaultVal)
        this.hasDefaultVal(item)
      })
      // 多查询功能
      if (this.isMoreQuery) {
        this.panelSwitch = !this.showRowNum
        this.$nextTick(() => {
          this.rowHeight = this.$refs.Col[0].$el.offsetHeight * this.showRowNum
        })
      }
    },
    methods: {
      hasDefaultVal(item) {
        if (item.defaultVal) {
          this.$nextTick(() => {
            this.selectItem = item
            this.value = item.value
            this.keywords = item.defaultVal
            this.panelSwitch = true
          })
        }
      },
      onchange(value) {
        const selectItem = this.options.filter(item => {
          return item.key == value
        })
        this.keywords = null
        this.selectItem = selectItem[0]
        this.placeholder = this.selectItem.placeholder
      },
      onCancel() {
        this.$emit('cancel')
      },
      onReset() {
        this.$refs.queryForm.resetFields()
        this.keywords = null
        for (const i in this.form) {
          if (this.form.hasOwnProperty(i)) {
            this.form[i] = null
          }
        }
        this.onSearch('reset')
      },
      onSearch(type) {
        if (this.isMoreQuery) {
          this.$emit('query', this.form, type === 'reset' ? 'reset' : 'search')
          return
        }
        this.$emit('query', { [this.selectItem.key]: this.keywords })
      },
      panelSwitchFn() {
        this.panelSwitch = !this.panelSwitch
        this.$emit('querySwitchCb', this.panelSwitch)
      }
    }
  }
</script>
<style  scoped lang="scss">
.marginL18{
  margin-left: 18px;
}
.more-query{
  margin-bottom: 10px;
  .more-row{
    overflow: hidden;
    flex-wrap: wrap;
  }

}
.query-title{
    margin-bottom: 8px;
    margin-top: 0px;
  }
 /deep/  .single-query .el-form-item{
    // width:140px;
  }
  .btn-group{
    &>button{
      margin: 0 2px;
    }
    display: inline-block;
    margin-right: 10px;
  }
  .more-btn-group{
    display: flex;
     &>div{
       &>button{
        margin: 0 2px;
      }
     }
    .right-btn{
      flex-shrink: 0;
       text-align: right;
       &>div{
         display: inline-block
       }
    }
    .left-btn{
      flex-grow: 1;
      text-align: left;
    }
  }

</style>
